.gzl-navbar {
  display: flex;
  background: #fff;
  &.gzl-navbar_auto{
    display: block;
    white-space: nowrap;
    font-size: 0;
    overflow: auto;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    @include calc(padding,0,5);
    .gzl-navbar__item {
      display: inline-block;
      width: auto;
      @include calc(padding,0,15);
    }
  }
}
.gzl-navbar__item {
  position: relative;
  flex: 1;
  width: 0;
  text-align: center;
  height: px(50);
  line-height: px(50);
  font-size: px(14);
  &.active,
  &.swiper-slide-thumb-active {
    color: $clr-active;
    font-weight: bold;
    font-size: px(16);
    &:after {
      content: '';
      position: absolute;
      bottom: px(4);
      left: 0;
      right: 0;
      margin: auto;
      width: px(16);
      height: px(2);
      background: $clr-active;
    }
  }
}
